<template>
  <div class="app-container home">
    <!-- 顶部统计卡片 -->
    <el-row :gutter="20">
      <el-col :xs="12" :sm="12" :md="6" :lg="6" v-for="(item, index) in statisticsData" :key="index">
        <el-card shadow="hover" class="statistics-card" :body-style="{ padding: '20px' }">
          <div class="statistics-item">
            <div class="icon-wrapper" :style="{ background: item.bgColor }">
              <el-icon><component :is="item.icon" /></el-icon>
            </div>
            <div class="content">
              <div class="title">{{ item.title }}</div>
              <div class="number">{{ item.number }}</div>
              <div class="footer">
                <span class="growth">{{ item.growth }}</span>
                <span class="compare">%较上月</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表展示区域 -->
    <el-row :gutter="20" class="mt-20">
      <el-col :span="16">
        <el-card shadow="hover">
          <template #header>
            <div class="chart-header">
              <span>业务趋势</span>
              <el-radio-group v-model="chartTimeRange" size="small">
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
                <el-radio-button label="year">全年</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="chart-container" ref="trendChartRef"></div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="hover">
          <template #header>
            <div class="chart-header">
              <span>案件类型分布</span>
            </div>
          </template>
          <div class="chart-container" ref="pieChartRef"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 通知公告区域 -->
    <el-row :gutter="20" class="mt-20">
      <el-col :span="24">
        <el-card shadow="hover">
          <template #header>
            <div class="notice-header">
              <div class="left">
                <el-icon><Bell /></el-icon>
                <span>最新公告</span>
              </div>
              <el-button link type="primary" @click="viewMore">查看更多</el-button>
            </div>
          </template>
          <div class="notice-list">
            <div v-for="notice in noticeList" :key="notice.noticeId" class="notice-item">
              <el-icon><Message /></el-icon>
              <router-link :to="'/system/notice-datas/index/' + notice.noticeId">
                {{ notice.noticeTitle }}
              </router-link>
              <span class="notice-time">{{ formatDate(notice.createTime) }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="Index">
import { ref, onMounted, onUnmounted } from 'vue';
import { listNotice } from "@/api/system/notice";
import { getbusinesscount,getpercentage } from "@/api/business/add.js";
import { getcasecount ,getcasepercentage,getcaseNewadd,selectsettle,　selectpercentage} from "@/api/business/case.js";
import { User, Document, Bell, Message, TrendCharts, Finished } from '@element-plus/icons-vue';
import * as echarts from 'echarts';

const router = useRouter();
const noticeList = ref([]);
const chartTimeRange = ref('month');
let trendChart = null;
let pieChart = null;
const trendChartRef = ref(null);
const pieChartRef = ref(null);

// 统计数据
const statisticsData = ref([
  {
    title: '总客户数',
    number: 'XXXXX',
    growth: '+XX%',
    icon: 'User',
    bgColor: 'var(--el-color-primary-light-9)'
  },
  {
    title: '案件总数',
    number: 'XXXXX',
    growth: '+XX%',
    icon: 'Document',
    bgColor: 'var(--el-color-success-light-9)'
  },
  {
    title: '本月新增',
    number: 'XXXXX',
    growth: '+XX%',
    icon: 'TrendCharts',
    bgColor: 'var(--el-color-warning-light-9)'
  },
  {
    title: '已完成案件',
    number: 'XXXXX',
    growth: '+XX%',
    icon: 'Finished',
    bgColor: 'var(--el-color-info-light-9)'
  }
]);

// 初始化趋势图
const initTrendChart = () => {
  if (trendChartRef.value) {
    trendChart = echarts.init(trendChartRef.value);
    const option = {
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '新增客户',
          type: 'line',
          smooth: true,
          data: [120, 132, 101, 134, 90, 230, 210],
          itemStyle: {
            color: '#409EFF'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(64,158,255,0.3)' },
              { offset: 1, color: 'rgba(64,158,255,0.1)' }
            ])
          }
        },
        {
          name: '新增案件',
          type: 'line',
          smooth: true,
          data: [220, 182, 191, 234, 290, 330, 310],
          itemStyle: {
            color: '#67C23A'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(103,194,58,0.3)' },
              { offset: 1, color: 'rgba(103,194,58,0.1)' }
            ])
          }
        }
      ]
    };
    trendChart.setOption(option);
  }
};

// 初始化饼图
const initPieChart = () => {
  if (pieChartRef.value) {
    pieChart = echarts.init(pieChartRef.value);
    const option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        right: 10,
        top: 'center'
      },
      series: [
        {
          name: '案件类型',
          type: 'pie',
          radius: ['40%', '70%'],
          center: ['40%', '50%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 14,
              fontWeight: 'bold'
            }
          },
          data: [
            { value: 1048, name: 'XXX案件' },
            { value: 735, name: 'XXX案件' },
            { value: 580, name: 'XXXXX' },
            { value: 484, name: 'XXXXX' },
            { value: 300, name: 'XXXXX' }
          ]
        }
      ]
    };
    pieChart.setOption(option);
  }
};

// 格式化日期
const formatDate = (date) => {
  return new Date(date).toLocaleDateString();
};

//获取客户总数
const businesscount = () => {
  getbusinesscount().then(response => {
    // Find the '总客户数' item and update its number
    const customerData = statisticsData.value.find(item => item.title === '总客户数');
    if (customerData) {
      customerData.number = response.data;
    }
    console.log("111", response.data);
    console.log("222", customerData.number);
  });
};
// 获取联系人百分比
const percentage = () => {
  getpercentage().then(response => {
    const percentageData = statisticsData.value.find(item => item.title === '总客户数');
    if (percentageData) {
      percentageData.growth = response.data;
    }
  });
};
// 获取案件总数
const casecount = () => {
  getcasecount().then(response => {
    const caseData = statisticsData.value.find(item => item.title === '案件总数');
    if (caseData) {
      caseData.number = response.data;
    }
  });
};
// 获取案件百分比
const casepercentage = () => {
  getcasepercentage().then(response => {
    const caseData = statisticsData.value.find(item => item.title === '案件总数');
    if (caseData) {
      caseData.growth = response.data;
    }
  });
};
// 获取本月案件新增
const caseNewadd = () => {
  getcaseNewadd().then(response => {
    const caseData = statisticsData.value.find(item => item.title === '本月新增');
    if (caseData) {
      caseData.number = response.data;
    }
  });
};
// 获取本月新增百分比
const caseNewcount = () => {
  getcasepercentage().then(response => {
    const caseData = statisticsData.value.find(item => item.title === '本月新增');
    if (caseData) {
      caseData.growth = response.data;
    }
  });
};
// 获取结案案件
const selectcasesettle = () => {
  selectsettle().then(response => {
    const caseData = statisticsData.value.find(item => item.title === '已完成案件');
    if (caseData) {
      caseData.number = response.data;
    }
  });
};
// 获取结案案件百分比
const selectcasepercentage = () => {
  selectpercentage().then(response => {
    const caseData = statisticsData.value.find(item => item.title === '已完成案件');
    if (caseData) {
      caseData.growth = response.data;
    }
  });
};
// 获取公告列表
const getList = () => {
  listNotice().then(response => {
    noticeList.value = response.rows;
  });
};

// 查看更多
const viewMore = () => {
  router.push('/system/notice');
};

// 监听窗口大小变化
const handleResize = () => {
  trendChart?.resize();
  pieChart?.resize();
};

onMounted(() => {
  getList();
  initTrendChart();
  initPieChart();
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {

  window.removeEventListener('resize', handleResize);
  trendChart?.dispose();
  pieChart?.dispose();
});

onMounted(() => {
  businesscount();
  percentage();
  casecount();
  casepercentage();
  caseNewadd();
  caseNewcount();
    selectcasesettle();
    selectcasepercentage();
});
</script>

<style scoped lang="scss">
.home {
  .statistics-card {
    .statistics-item {
      display: flex;
      align-items: center;
      
      .icon-wrapper {
        width: 56px;
        height: 56px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16px;
        
        .el-icon {
          font-size: 24px;
          color: var(--el-color-primary);
        }
      }
      
      .content {
        flex: 1;
        
        .title {
          font-size: 14px;
          color: var(--el-text-color-secondary);
          margin-bottom: 8px;
        }
        
        .number {
          font-size: 24px;
          font-weight: bold;
          color: var(--el-text-color-primary);
          line-height: 1;
          margin-bottom: 8px;
        }
        
        .footer {
          font-size: 12px;
          
          .growth {
            color: #67C23A;
            margin-right: 4px;
          }
          
          .compare {
            color: var(--el-text-color-secondary);
          }
        }
      }
    }
  }

  .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    span {
      font-size: 16px;
      font-weight: bold;
    }
  }

  .chart-container {
    height: 350px;
  }

  .notice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .left {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      font-weight: bold;
    }
  }

  .notice-list {
    .notice-item {
      display: flex;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid var(--el-border-color-lighter);
      
      &:last-child {
        border-bottom: none;
      }
      
      .el-icon {
        margin-right: 8px;
        color: var(--el-color-primary);
      }
      
      a {
        flex: 1;
        color: var(--el-text-color-primary);
        text-decoration: none;
        
        &:hover {
          color: var(--el-color-primary);
        }
      }
      
      .notice-time {
        color: var(--el-text-color-secondary);
        font-size: 12px;
      }
    }
  }

  .mt-20 {
    margin-top: 20px;
  }
}
</style>